<script setup>
import { ref } from 'vue';
import TodoList from './components/todo-list.vue';
import Game from './components/game.vue';

const currentComponent = ref('Game'); // 默认显示 Game 组件

// 组件映射
const components = {
  Game,
  TodoList,
};
</script>

<template>
  <div id="app">
    <header>
      <button @click="currentComponent = 'Game'">游戏</button>
      <button @click="currentComponent = 'TodoList'">待办事项</button>
    </header>
    <main>
      <!-- 动态组件 -->
      <component :is="components[currentComponent]"></component>
    </main>
  </div>
</template>

<style scoped>
#app {
  text-align: center;
}

header {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

main {
  padding: 20px;
}
</style>
